import { CheckSquareOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import { DrawerForm } from '@ant-design/pro-form';
import { Col, Flex, Row, Spin } from 'antd';
import Tree, { DataNode } from 'antd/lib/tree';
import { useState } from 'react';

interface ReceiptClueProps {
    id: string;
    receipt: string;
}

const ReceiptClue: React.FC<ReceiptClueProps> = ({ id, receipt }) => {
    const [dataTree, setDataTreeState] = useState<DataNode[]>();
    const [dataCheckTree, setDataCheckTreeState] = useState<any>();

    const checkTreeKeys = new Array();



    /**
     * 加载组织树请求网络
     */
    const loadData = async () => {
        try {
            const response = await receiptRecord({ id });
            if (response.code === 0) {
                setDataTreeState(readyTreeData(response.data));
                setDataCheckTreeState(checkTreeKeys);
            }
        } catch (error) { }
    };

    /**
     * 预备Tree结构数据
     * @param data
     */
    function readyTreeData(data: Array<UserData.Organization>): any {
        const treeData = new Array();

        if (data) {
            data.forEach((val, idx, array) => {
                treeData.push({
                    title: val.name,
                    key: val.id,
                    icon: val.isView === 1 ? <CheckSquareOutlined /> : <QuestionCircleOutlined />,
                    children: readyTreeData(val.children as Array<UserData.Organization>),
                });

                if (val.isView !== undefined && val.isView === 1 && !val.children) {
                    checkTreeKeys.push(val.id);
                }
            });
        }
        return treeData;
    }

    return (
        <DrawerForm
            title="查阅媒体"
            trigger={<a>{receipt}</a>}
            drawerProps={{
                size: 'large',
                forceRender: true,
                destroyOnClose: true,
                width: '600px'
            }}
            submitter={false}
            onOpenChange={(visible) => {
                if (visible) {
                    loadData();
                }
            }}
        >
            <Spin spinning={dataTree && dataTree.length <= 0}>
                {dataTree && dataTree.length ? (

                    <Row>
                        <Col span={12}>

                            <Tree treeData={dataTree} checkedKeys={dataCheckTree} checkable style={{ width: '100%' }} />
                        </Col>
                    </Row>
                ) : (
                    '暂无数据'
                )}
            </Spin>

        </DrawerForm>
    );
};

export default ReceiptClue;
